<template>
    <IContent v-model="componentProps">

        <ISearch v-model="search">
            <Row>
                <FormItem label="产品状态">
                    <RemoteButton size="small" url="common/select/dictionaries/PRODUCT_STATUS" v-model="search.status"
                                  @on-change="getLists"></RemoteButton>
                </FormItem>
            </Row>
            <Row>
                <FormItem label="锁定状态">
                    <RemoteButton size="small" url="common/select/dictionaries/PRODUCT_LOCK_STATUS" v-model="search.lock_status"
                                  @on-change="getLists"></RemoteButton>
                </FormItem>
            </Row>
            <Row>
                <FormItem label="奖项管理">
                    <RemoteButton size="small" url="common/select/dictionaries/PRODUCT_VALIDITY" v-model="search.validity"
                                  @on-change="getLists"></RemoteButton>
                </FormItem>
            </Row>
            <Row>
                <FormItem label="存储条件">
                    <RemoteButton size="small" url="common/select/dictionaries/PRODUCT_CONDITION" v-model="search.condition"
                                  @on-change="getLists"></RemoteButton>
                </FormItem>
            </Row>
            <FormItem label="产品SKU">
                <Input v-model="search.sku" placeholder="产品SKU" size="small"></Input>
            </FormItem>
            <FormItem label="产品名称">
                <Input v-model="search.name" placeholder="产品名称" size="small"></Input>
            </FormItem>
            <FormItem :label-width="1">
                <ButtonGroup>
                    <Button type="primary" icon="ios-search" size="small" @click="getLists(1)">搜索</Button>
                    <Button type="success" icon="ios-add" size="small" @click="openComponent(`ICreate`)">添加</Button>
                </ButtonGroup>
            </FormItem>
        </ISearch>

        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange"
                :loading="loading">
            <template slot-scope="{ row, index }" slot="action">
                <ButtonGroup>
                    <Button size="small" v-if="row.status === '0'"
                            @click="openComponent('IUpdate', {id: row.id})">编辑
                    </Button>
                    <Button size="small" v-if="row.status === '1' && row.lock_status === '1'"
                            @click="openComponent('ISimpleUpdate', {id: row.id})">修改
                    </Button>
                    <Button type="info" size="small" v-if="row.status === '0'"
                            @click="submitForAffirm(row.id)">确认
                    </Button>
                    <Button type="warning" size="small" v-if="row.status === '1' && row.lock_status === '0'"
                            @click="submitForLock(row.id)">锁定
                    </Button>
                    <Button type="info" size="small" v-if="row.status === '1' && row.lock_status === '1'"
                            @click="submitForUnLock(row.id)">解锁
                    </Button>
                </ButtonGroup>
            </template>
            <template slot-scope="{ row, index }" slot="unit">
                <RemoteSpan url="common/select/unit" v-model="row.unit"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="condition">
                <RemoteSpan url="common/select/dictionaries/PRODUCT_CONDITION" v-model="row.condition"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="validity">
                <RemoteSpan url="common/select/dictionaries/PRODUCT_VALIDITY" v-model="row.validity"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <RemoteSpan url="common/select/dictionaries/PRODUCT_STATUS" v-model="row.status"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="lock_status">
                <RemoteSpan url="common/select/dictionaries/PRODUCT_LOCK_STATUS" v-model="row.lock_status"></RemoteSpan>
            </template>
        </ITable>

        <component slot="component" v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import IContent from "../../../../components/layout/IContent";
    import ISearch from "../../../../components/layout/ISearch";
    import ITable from "../../../../components/layout/ITable";
    import IContentMixins from "../../../../mixins/iContentMixins"
    import RemoteSpan from "../../../../components/layout/RemoteSpan";
    import RemoteButton from "../../../../components/form/remoteButton";

    export default {
        components: {
            RemoteButton,
            RemoteSpan,
            ICreate: () => import('./create'),
            IUpdate: () => import('./update'),
            IView: () => import('./iview'),
            ISimpleUpdate: () => import('./iSimpleUpdate'),
            ITable, ISearch, IContent
        },
        mixins: [IContentMixins],
        data() {
            return {
                search: {},
                table: {
                    columns: [
                        {
                            title: '产品SKU',
                            key: 'sku',
                            width: 200
                        },
                        {
                            title: '产品名称',
                            key: 'name'
                        },
                        {
                            title: '产品单位',
                            slot: 'unit',
                            width: 100
                        },
                        {
                            title: '存储条件',
                            slot: 'condition',
                            width: 100
                        },
                        {
                            title: '效期管理',
                            slot: 'validity',
                            width: 130
                        },
                        {
                            title: '禁售天数',
                            key: 'lockup_validity',
                            width: 130
                        },
                        {
                            title: '锁定状态',
                            slot: 'lock_status',
                            width: 100
                        },
                        {
                            title: '状态',
                            slot: 'status',
                            width: 100
                        },
                        {
                            title: '操作',
                            slot: 'action',
                            width: 200
                        }
                    ]
                },
            }
        },
        methods: {
            getLists(page) {
                page = page || this.page.current;
                this._lists(`product/index`, page);
            },
            submitForAffirm(id){
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.put(`product/index/${id}/affirm`).then(() => {
                        this.$Message.success('确认成功');
                        this.getLists();
                    }).finally(() => {
                        this.loading = false;
                    })
                });
            },
            submitForLock(id){
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.put(`product/index/${id}/lock`).then(() => {
                        this.$Message.success('锁定成功');
                        this.getLists();
                    }).finally(() => {
                        this.loading = false;
                    })
                });
            },
            submitForUnLock(id){
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.put(`product/index/${id}/unlock`).then(() => {
                        this.$Message.success('锁定成功');
                        this.getLists();
                    }).finally(() => {
                        this.loading = false;
                    })
                });
            }
        }
    }
</script>

<style>
</style>
